<template>
  <div class="outDiv">
    <scroller lock-x>
      <div>
        <Header aa="../userCenter/users" contentTitle="修改密码"></Header>
        <div class="mainDiv">
          <ul class="pwd_list">
            <li class="inputGorup">
              <span class="name">原始密码</span>
              <input type="text" v-model="old_pwd" placeholder="请输入原始密码">
            </li>
            <li class="inputGorup">
              <span class="name">新密码</span>
              <input type="password" v-model="new_pwd" placeholder="请输入新密码">
            </li>
            <li class="inputGorup">
              <span class="name">确认新密码</span>
              <input type="password" v-model="confirm_pwd" placeholder="请再次输入新密码">
            </li>
          </ul>
          <div class="btn" @click="changePwd">修改密码</div>
        </div>
        <div style="width: 100%; height: 1.5rem"></div>
      </div>
    </scroller>
  </div>  
</template>

<script>
import Header from '~/components/Header_act'
import axios2 from '~/plugins/axios2';
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
export default {
  components: {
    Header,
  },
  data() {
    return {
      old_pwd: '',
      new_pwd: '',
      confirm_pwd: ''
    } 
  },
  methods: {
    changePwd() {
      if (this.new_pwd.length < 6 || this.new_pwd.length > 16) {
        this.$vux.toast.text('请输入6~16密码');
      } else if (this.old_pwd == this.new_pwd) {
        this.$vux.toast.text('新密码不能与原始密码相同');
      } else if (this.new_pwd !== this.confirm_pwd) {
        this.$vux.toast.text('新密码两次输入不一致，请重新填写！');
      } else {
        let encryptor = new JSEncrypt() // 新建JSEncrypt对象				 
        let publicKey =
          `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCU+sOs2dwS5k10e44LhAwEVDicF2SM9O6/cDdXuDyemjx/RMT/yDJHQ4+jqJOB11nIdeo2lvrD/9oPMePauTjCaXd7AxO75Gzx24skFOb6Rw5Tvjffgsm0ka+/UbK6OWdruPXJDSCrnRskQVhMNRrV6qGLaOCWCQzNwOcz7aCMQIDAQAB`
        encryptor.setPublicKey(publicKey) // 设置公钥		
        let regTime = new Date().getTime();
        let oldPwd = encryptor.encrypt(regTime + this.old_pwd) // 对需要加密的数据进行加密
        let rsaPassWord = encryptor.encrypt(regTime + this.confirm_pwd) // 对需要加密的数据进行加密
  
        axios2.post('/identity/teacherModifyPassword', {
          credentials: oldPwd,
          modifyTime: regTime,
          password: rsaPassWord
        }).then(res => {
          const _that = this;
          if (res.message == '密码修改成功') {
            this.$vux.toast.show({
              text: '修改成功！',
              width: '5rem',
              type: 'text',
              onShow () {},
              onHide () {
                _that.commonJs.gosto('/userCenter/users');
              }
            })
          } else {
            _that.$vux.toast.text(res.message)
          }
        }).catch(error => {
          this.$vux.toast.text(error);
          this.$vux.toast.hide();
        })
      }

    }
  },

}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    height: 100vh;
    background: #fff;

    .mainDiv {
      padding: 0 0.32rem;

      .pwd_list {
        padding-left: 0;
        list-style: none;
        margin-top: 0.24rem;

        .inputGorup {
          width: 100%;
          height: 1.12rem;
          border-bottom: 1px solid #E5E8ED;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .name {
            color: #222;
            font-size: 0.28rem;
            line-height: 0.4rem;
            width: 1.4rem;
            margin-right: 0.24rem;
          }

          input {
            outline: none;
            border: none;
            font-size: 0.26rem;
            color: #222;
          }
          input::-webkit-input-placeholder { color: #C7C7C7; } 
          input:-moz-placeholder { color: #C7C7C7; } 
          input::-moz-placeholder { color: #C7C7C7; } 
          input:-ms-input-placeholder { color: #C7C7C7; }

        }

      }

      .btn {
        margin: 0 auto;
        width: 6.22rem;
        height: 0.88rem;
        line-height: 0.88rem;
        border-radius: 0.44rem;
        background: #409EFF;
        color: #fff;
        font-size: 0.3rem;
        font-weight: bold;
        text-align: center;
        letter-spacing: 1px;
        margin-top: 0.64rem;
      }

    }

  }    
</style>
